<template>
  <!-- 
        @size-change:每页多少条，pageSize 改变时会触发
        @current-change：当前页，currentPage 改变时会触发
        :current-page：默认选中哪一页
        :page-sizes：定义每页多少条列表
        :page-size:默认定义每页多少条
        :total：一共多少条数据
        layout="显示分页的插件"
            total：总条数插件
            sizes：每页多少条插件
            prev/next：上一页/下一页插件
            pager：页码插件
            jumper：前往那一页插件
    -->
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[4, 8, 10, 20]"
      :page-size="4"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  // 第五步接收
  props: {
    total: {
      type: Number,
    },
  },
  data() {
    return {
      obj: {},
    };
  },
  methods: {
    // 每页多少条
    handleSizeChange(val) {
      // 发送数据
      this.$emit("handleSize", val);
    },
    // 当前页
    handleCurrentChange(val) {
      // 发送数据
      this.$emit("handleCurrent", val);
    },
  },
};
</script>